<link rel="stylesheet" href="__CDN__/assets/addons/health/libs/element/element.css">
<link rel="stylesheet" href="__CDN__/assets/addons/health/libs/common.css">
<style>
	#userIndex {
		color: #444;
	}

	.create-goods span,
	.add-params span,
	.add-level1-sku span {
		margin-left: 8px;
	}

	.platform-name span {
		display: flex;
	}

	.display-flex {
		display: flex;
		align-items: center;
	}

	/*条件筛选*/
	.choose-container {
		margin-bottom: 10px;
	}

	.custom-choose,
	.custom-choose-type,
	.custom-choose-sub {
		height: 50px;
		justify-content: space-between;
		padding: 0 20px;
		background: #fff;
	}

	.custom-choose-type,
	.custom-choose-sub {
		justify-content: flex-start;
	}

	.custom-choose-sub {
		height: 70px;
		padding: 0 10px 20px 20px;
	}

	.choose-status-tip {
		margin-right: 12px;
	}

	.custom-choose-type-tip {
		margin-right: 16px;
	}

	.choose-btn {
		width: 80px;
		border: 1px solid #E6E6E6;
		margin-right: 10px;
		height: 30px;
	}

	.choose-btn-active {
		background-color: #7536D0;
		border: none;
		color: #fff;
	}

	/*条件筛选end*/

	/* 表格 */
	.custom-table {
		/* padding: 20px 20px 30px; */
		padding: 0px 20px 30px;
		background: #fff;
	}

	.custom-table .custom-header {
		justify-content: space-between;
		margin-bottom: 14px;
	}

	.custom-table .edit-text {
		color: #7438D5;
		cursor: pointer;
		margin-right: 14px;
	}

	/*按钮*/
	.common-btn {
		height: 32px;
		cursor: pointer;
		border-radius: 4px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 12px;
	}
</style>
<script src="__CDN__/assets/addons/health/libs/vue.js"></script>
<script src="__CDN__/assets/addons/health/libs/element/element.js"></script>
<script src="__CDN__/assets/addons/health/libs/Sortable.min.js"></script>
<script src="__CDN__/assets/addons/health/libs/vuedraggable.js"></script>
<script src="__CDN__/assets/addons/health/libs/moment.js"></script>
<div id="userIndex" v-cloak>
	<!--条件筛选-->
	<div class="choose-container">
		<div class="custom-choose display-flex">
			<div class="choose-status">
				<span class="choose-status-tip">筛选条件</span>
				<el-switch @change="isChoose" :active-value="1" :inactive-value="0" v-model="chooseType"
				           active-color="#7536D0" inactive-color="#E9EBEF">
				</el-switch>
			</div>
			<div class="custom-search">
			</div>
		</div>
		<div v-if="chooseType===1">
			<div class="custom-choose-type display-flex">
				<div class="custom-choose-type-tip">
					用户手机
				</div>
				<div class="custom-choose-type-tip">
					<el-input placeholder="请输入用户手机号" v-model="where.mobile"></el-input>
				</div>
				<div class="custom-choose-type-tip">
					是否认证
				</div>
				<div class="custom-choose-type-tip">
					<el-select clearable v-model="where.id_card" placeholder="请选择">
						<el-option label="已认证" :value="1"></el-option>
						<el-option label="未认证" :value="0"></el-option>
					</el-select>
				</div>
				<div class="custom-choose-type-tip">
					推广渠道
				</div>
				<div class="custom-choose-type-tip">
					<el-select multiple collapse-tags clearable v-model="where.channel_id" placeholder="请选择">
						<el-option v-for="(item,index) in channel" :key="index" :label="item.name"
						           :value="item.id">
						</el-option>
					</el-select>
				</div>
			</div>
			<div class="custom-choose-type display-flex">
				<div class="custom-choose-type-tip">
					注册时间
				</div>
				<div class="custom-choose-type-tip">
					<el-date-picker
							v-model="where.created_at"
							type="daterange"
							align="right"
							value-format="yyyy-MM-dd"
							unlink-panels
							range-separator="至"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
							:picker-options="pickerOptions">
					</el-date-picker>
				</div>
			</div>
			<div class="custom-choose-sub display-flex">
				<div class="common-btn choose-btn choose-btn-active" style="margin-right: 20px;"
				     @click="operation('filter')">
					筛选
				</div>
				<div class="common-btn choose-btn" @click="operation('clear')">
					清空
				</div>
			</div>
		</div>
	</div>
	<!--表格-->
	<div class="custom-table">
		<div class="custom-header display-flex">
			<div class="display-flex">
				<div class="custom-refresh display-flex-c" @click="getData">
					<i class="el-icon-refresh"></i>
				</div>
				<div class="custom-export display-flex-c" @click="operation('export')">
					<div class="common-btn choose-btn">
						数据导出
					</div>
				</div>
			</div>
		</div>
		<div class="custom-table-border">
			<el-table ref="multipleTable" :data="data" tooltip-effect="dark" style="width: 100%" border
			          :row-class-name="tableRowClassName" :cell-class-name="tableCellClassName"
			          @selection-change="handleSelectionChange" :header-cell-class-name="tableCellClassName"
			          @row-dblclick="operation">
				<el-table-column type="selection" min-width="36">
				</el-table-column>
				<el-table-column label="ID" prop="id" min-width="60" align="center">
				</el-table-column>
				<el-table-column label="头像" min-width="60" align="center">
					<template slot-scope="scope">
						<el-avatar size="small" :src="scope.row.avatar"></el-avatar>
					</template>
				</el-table-column>
				<el-table-column label="手机号" min-width="110" align="center">
					<template slot-scope="scope">
						<div><span v-if="scope.row.mobile">{{scope.row.mobile}}</span><span v-else>-</span></div>
					</template>
				</el-table-column>
				<el-table-column label="来源渠道" prop="channel_name" min-width="110" align="center">
				</el-table-column>
				<el-table-column label="办理业务" prop="product_name" min-width="110" align="center">
				</el-table-column>
				<el-table-column label="真实姓名" min-width="120" align="center">
					<template slot-scope="scope">
						<div class="ellipsis-item">{{scope.row.real_name}}</div>
					</template>
				</el-table-column>
				<el-table-column label="身份证号" min-width="180" align="center">
					<template slot-scope="scope">
						<div class="ellipsis-item">{{scope.row.id_card}}</div>
					</template>
				</el-table-column>
				<el-table-column label="积分" prop="virtually_coin" min-width="120" align="center">
				</el-table-column>
				<el-table-column label="余额" prop="balance" min-width="120" align="center">
				</el-table-column>
				<el-table-column label="累计签到天数" prop="sign_in_day_total" align="center" min-width="120">
					<template slot-scope="scope">
						<div>
							<el-tooltip :disabled="!(scope.row.last_sign_in>0)" effect="dark"
							            :content="'最后签到时间:'+moment(scope.row.last_sign_in*1000).format('YYYY-MM-DD HH:mm:ss')"
							            placement="top">
								<el-button type="text">{{scope.row.sign_in_day_total}}</el-button>
							</el-tooltip>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="加入时间" min-width="160" align="center">
					<template slot-scope="scope">
						<div>
							{{moment(scope.row.created_at * 1000).format("YYYY-MM-DD HH:mm:ss")}}
						</div>
					</template>
				</el-table-column>
				<el-table-column label="最后活跃" prop="last_remain_date" min-width="160"
				                 align="center">
				</el-table-column>
				<el-table-column fixed="right" label="操作" min-width="100" align="center">
					<template slot-scope="scope">
						<div>
							{if condition = "$auth->check('health/user/user/profile')"}
							<span class="edit-text" @click="operation('edit',scope.row.id)">查看详情</span>
							{/if}
						</div>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="page-container display-flex">
			<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
			               :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="limit"
			               layout="total, sizes, prev, pager, next, jumper" :total="totalPage">
			</el-pagination>
		</div>
	</div>
</div>